﻿<UserControl x:Class="FacebookClient.FriendBarControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:FacebookClient="clr-namespace:FacebookClient"
    xmlns:ClientManager="clr-namespace:ClientManager"
    xmlns:ClientManagerControls="clr-namespace:ClientManager.Controls"
    xmlns:ClientManagerView="clr-namespace:ClientManager.View"
    Focusable="False">
  <UserControl.Resources>
    <DataTemplate x:Key="ItemTemplate">
      <FacebookClient:FriendButton
          Friend="{Binding}" 
          Style="{DynamicResource SmallFriendButtonStyle}" 
          Click="_OnFriendClicked" 
          Margin="5" />
    </DataTemplate>

    <Style x:Key="FriendsBarListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
      <Setter Property="ContentTemplate" Value="{DynamicResource ItemTemplate}" />
      <Setter Property="ClipToBounds" Value="False"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ListBoxItem">
            <Border x:Name="ButtonBorder" RenderTransformOrigin=".5, .5" BorderThickness="0">
              <Border.RenderTransform>
                <TransformGroup>
                  <ScaleTransform ScaleX="1" ScaleY="1" />
                </TransformGroup>
              </Border.RenderTransform>
              <ContentPresenter Focusable="False" />
              <Border.ToolTip>
                <TextBlock Text="{Binding Name}" MaxWidth="300" TextTrimming="CharacterEllipsis" >
                  <TextBlock.Style>
                    <Style TargetType="{x:Type TextBlock}">
                      <Setter Property="Visibility" Value="Visible" />
                      <Style.Triggers>
                        <DataTrigger Binding="{Binding Name}" Value="">
                          <Setter Property="Visibility" Value="Collapsed" />
                        </DataTrigger>
                      </Style.Triggers>
                    </Style>
                  </TextBlock.Style>
                </TextBlock>
              </Border.ToolTip>
            </Border>
            <ControlTemplate.Triggers>
              <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True">
                <Setter Property="Panel.ZIndex" Value="1"/>
                <DataTrigger.EnterActions>
                  <BeginStoryboard>
                    <Storyboard>
                      <DoubleAnimationUsingKeyFrames
                        BeginTime="00:00:00"
                        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                        Storyboard.TargetName="ButtonBorder">
                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" KeySpline="0,0,0.875,1" />
                        <SplineDoubleKeyFrame KeyTime="00:00:00.0400000" Value="1.50" KeySpline="0.125,0,0.875,1" />
                        <SplineDoubleKeyFrame
                          KeyTime="00:00:00.0700000"
                          Value="1.4" />
                      </DoubleAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ButtonBorder">
                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" KeySpline="0,0,0.875,1" />
                        <SplineDoubleKeyFrame KeyTime="00:00:00.0400000" Value="1.5" KeySpline="0.125,0,0.875,1" />
                        <SplineDoubleKeyFrame KeyTime="00:00:00.0700000" Value="1.4" />
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                  <BeginStoryboard>
                    <Storyboard>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                                                 Storyboard.TargetName="ButtonBorder">
                        <SplineDoubleKeyFrame KeyTime="00:00:00.1500000"
                                                            Value="1"
                                                            KeySpline="0,0,0.875,1" />
                        <SplineDoubleKeyFrame KeyTime="00:00:00.2200000"
                                                            Value="1.025"
                                                            KeySpline="0,0,0.875,1" />
                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1" />
                      </DoubleAnimationUsingKeyFrames>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ButtonBorder">
                        <SplineDoubleKeyFrame KeyTime="00:00:00.1500000" Value="1" KeySpline="0,0,0.875,1" />
                        <SplineDoubleKeyFrame KeyTime="00:00:00.2200000" Value="1.025" KeySpline="0,0,0.875,1" />
                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1" />
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </BeginStoryboard>
                </DataTrigger.ExitActions>
              </DataTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <ControlTemplate x:Key="FriendsBarScrollViewerTemplate" TargetType="{x:Type ScrollViewer}">
      <Grid x:Name="Grid" Background="{TemplateBinding Background}">
        <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
            Margin="0"
            VerticalAlignment="Stretch"
            Content="{TemplateBinding Content}"
            ContentTemplate="{TemplateBinding ContentTemplate}"
            CanContentScroll="{TemplateBinding CanContentScroll}"
            CanHorizontallyScroll="False"
            CanVerticallyScroll="False" />
      </Grid>
    </ControlTemplate>

    <Style x:Key="FriendsBarListBoxStyle" TargetType="ListBox">
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
      <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
      <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
      <Setter Property="VerticalContentAlignment" Value="Center" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ListBox}">
            <Border 
                SnapsToDevicePixels="true"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Padding="0"
                OpacityMask="{DynamicResource FriendBarOpacityMask}">

              <ScrollViewer
                  Padding="{TemplateBinding Padding}"
                  Template="{DynamicResource FriendsBarScrollViewerTemplate}"
                  Focusable="false">
                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
              </ScrollViewer>
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </UserControl.Resources>

  <Border Background="{DynamicResource FriendBarBackgroundBrush}" BorderBrush="{DynamicResource FriendBarBorderBrush}" BorderThickness="0,1,0,0" >
    <Grid x:Name="FilmStripBlurEffectArea">
      <FacebookClient:FilmStripControl x:Name="FilmStrip"
          ItemsSource="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=Friends}"
          Style="{StaticResource FriendsBarListBoxStyle}"
          ItemContainerStyle="{DynamicResource FriendsBarListBoxItemStyle}"
          ItemHeight="74"
          ScrollViewer.CanContentScroll="True"
          ScrollViewer.HorizontalScrollBarVisibility="Visible"
          ScrollViewer.VerticalScrollBarVisibility="Hidden"
          Focusable="False"
          Background="Transparent">
        <FacebookClient:FilmStripControl.ItemsPanel>
          <ItemsPanelTemplate>
            <FacebookClient:FilmStripPanel ItemHeight="{Binding ElementName=FilmStrip, Path=ItemHeight}"/>
          </ItemsPanelTemplate>
        </FacebookClient:FilmStripControl.ItemsPanel>
      </FacebookClient:FilmStripControl>
    </Grid>
  </Border>
</UserControl>
